import React, {Component} from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  Checkbox,
  Radio,
  Modal,
  Icon,
  message,
  Switch,
  Card,
} from 'antd';
import myaxios, {get, put, post} from 'common/fetch';
import {
  ADD_MODEL_URL,
  CARTYPE_URL,
  MODEL_DETAIL_URL,
  SEARCH_BRAND_LIST_URL,
} from 'constant/url';
import AvatarUpload from './component/avatarUploader';

const RadioGroup = Radio.Group,
  FormItem = Form.Item;

export default class VehicleModel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      carTypeId: null,
      released: false,
      brandName: '',
      brandList: [],
      brandListRes: [],
      carTypeList: [],
      modelImg:
        'https://carplus.oss-cn-beijing.aliyuncs.com/ac18a3b562b35dbbc2526c72b2af0830',
    };
  }
  componentDidMount() {
    this.queryCarType();
    this.queryBrandList();
  }
  // 获取用户列表
  queryBrandList(namePrefix = '') {
    get(SEARCH_BRAND_LIST_URL, {namePrefix}).then(res => {
      const brandList = [];
      res.map(item => {
        if (brandList.indexOf(item.brandName) == -1) {
          brandList.push(item.brandName);
        }
      });
      this.setState({
        brandList,
        brandListRes: res,
      });
    });
  }
  // 获取车辆分类
  queryCarType() {
    get(CARTYPE_URL).then(res => {
      this.setState({
        carTypeList: res,
      });
    });
  }
  onRadioChange = e => {
    const carTypeId = e.target.value;
    this.setState({
      carTypeId,
    });
  };
  onSwitchChange = value => {
    const released = value;
    this.setState({
      released,
    });
  };
  // 确认按钮
  handleOk() {
    const {brandName, modelImg, carTypeId, released} = this.state,
      brandListRes = [...this.state.brandListRes],
      modelName = this.refs.modelName.input.value;
    let brandId;
    brandListRes.map(item => {
      if (item.brandName == brandName) {
        brandId = item.id;
      }
    });
    if (!modelName || !carTypeId) {
      return message.error('请填写完整信息！');
    }
    //const {modelDetail, carTypeId, released, modelImg} = this.state;
    post(`${ADD_MODEL_URL}`, {
      typeId: carTypeId,
      released: released ? 1 : 0,
      modelImg,
      modelName,
      brandId,
    }).then(res => {
      //this.props.reloadModelDetail();
      this.props.hidePanel();
    });
  }
  modelImgChange = value => {
    this.setState({
      modelImg: value,
    });
    return new Promise(function(resolve){
        resolve("图片更新完毕"); 
    });
  };
  handleSearch = value => {
    this.setState({brandName: value});
    this.queryBrandList(value);
  };
  render() {
    const {brandName, carTypeList, carTypeId, released, modelImg} = this.state;
    const carTypeListRadios = carTypeList.map((ele, index) => {
      return (
        <Radio style={{width: '100px'}} value={ele.id.toString()} key={index}>
          {ele.name}
        </Radio>
      );
    });
    return (
      <div>
        <h5 className="panel-custom-title">新建车型</h5>
        <Card title="车型图" style={{margin: 20}} bordered={false}>
          <div className="msg-assign-wrapper">
            <div>
              <AvatarUpload
                onEdit={value => {
                  return this.modelImgChange(value);
                }}
                defaultImg={modelImg}
              />
            </div>
          </div>
        </Card>
        <Card title="品牌" style={{margin: 20}} bordered={false}>
          <div className="msg-assign-wrapper">
            <div>
              <div className="mb10">
                品牌名称：{' '}
                <Select
                  mode="combobox"
                  value={brandName}
                  placeholder="请输入品牌名称"
                  defaultActiveFirstOption={false}
                  showArrow={false}
                  filterOption={false}
                  onChange={this.handleSearch}
                  style={{width: '500px'}}>
                  {this.state.brandList.map(d => (
                    <Select.Option key={d}>{d}</Select.Option>
                  ))}
                </Select>
              </div>
            </div>
          </div>
          <div className="msg-assign-wrapper mb10">
            <div>
              <div className="mb10">
                车型名称：<Input
                  ref="modelName"
                  style={{width: '500px'}}
                  placeholder="请输入车型名称"
                />
              </div>
            </div>
          </div>
          <div className="msg-assign-wrapper mt30">
            <div>
              <div className="mb10">请选择车型分类：</div>
              <div className="mt10">
                <RadioGroup onChange={this.onRadioChange}>
                  {carTypeListRadios}
                </RadioGroup>
              </div>
            </div>
          </div>
          <div className="msg-assign-wrapper mt30">
            <div>
              <div className="mb10">发布至线上：</div>
              <div className="mt10">
                <Switch onChange={this.onSwitchChange} checked={released} />
              </div>
            </div>
          </div>
        </Card>
        <Button
          type="primary"
          className="mt30 ml20"
          onClick={this.handleOk.bind(this)}>
          确定
        </Button>
      </div>
    );
  }
}
